/// <reference path="./index.d.ts" />

import React from "react";
import { View, Text, Image } from "@tarojs/components";


type ReducerProp = (state: ShareQrcodeView.StateProp, action: Partial<ShareQrcodeView.StateProp>) => Partial<ShareQrcodeView.StateProp>

type StyleProp = {
    containerStyle?: React.CSSProperties;
    contentViewStyle?: React.CSSProperties;
}
type StyleReducerProp = (state: StyleProp, action: Partial<StyleProp>) => StyleProp

const reduer = (state, action) => ({ ...state, ...action })



export default React.forwardRef<ShareQrcodeView.Current, ShareQrcodeView.Prop>((props, ref) => {

    const [viewModel, setViewModel] = React.useReducer<ReducerProp>(reduer, {})

    const [styleState, styleDispatch] = React.useReducer<StyleReducerProp>(
        reduer,
        {
            containerStyle: styles.container,
            contentViewStyle: styles.contentViewStyle
        })

    React.useImperativeHandle(ref, () => ({
        show: show,
        hide: () => {
            hide()
        }
    }), [])





    const show = (props: ShareQrcodeView.StateProp) => {
        setViewModel(props)

        styleDispatch({
            containerStyle: {
                ...styleState.containerStyle,
                visibility: 'visible',
                transition: 'visibility 0.15s ease-in'
            },
            contentViewStyle: {
                ...styleState.contentViewStyle,
                transform: 'scale(1)',
                transition: 'transform 0.15s ease-in'
            }
        })
    }

    const hide = () => {
        setViewModel({ name: undefined, backImage: undefined, qrcode: undefined, corName: undefined })
        styleDispatch({
            containerStyle: {
                ...styleState.containerStyle,
                visibility: 'hidden',
                transition: 'visibility 0.15s ease-out'
            },
            contentViewStyle: {
                ...styleState.contentViewStyle,
                transform: 'scale(0.5)',
                transition: 'transform 0.15s ease-out'
            }
        })
    }




    const contentViewRef = React.useRef<any>()

    return (
        <View
            style={styleState.containerStyle} onClick={e => {
                hide()
                e.stopPropagation()
            }}
        >

            <View style={styleState.contentViewStyle} ref={contentViewRef} onClick={e => {
                // console.log(e)
                e.stopPropagation()
            }}>

                <View style={{position:'relative',display:'flex',flexDirection:'column'}}>
                    <View style={{zIndex:-1, position:'absolute',right:'-10px',top:'-60px',display:'flex',flexDirection:'column',alignItems:'center',width:'50px',paddingTop:'20px'}} 
                        onClick={e=>{
                            e.stopPropagation()
                            hide()
                        }}
                    >
                        <Image src={require('./delete.png')} style={{width:'21px',height:'21px'}}/>
                        <View style={{height:'20px',width:'2px',backgroundColor:'#F0F0F0'}}/>
                    </View>
                    <View style={{ width: 'calc(100vw - 90px)', backgroundColor: '#F2F2F2', padding: '15px', display: 'flex', flexDirection: 'column', borderRadius: '10px', overflow: "hidden" }}>
                        <View style={{ display: 'flex', flexDirection: 'column', borderRadius: '5px', overflow: 'hidden' }}>
                            <Image src={viewModel.backImage || ''} style={{ width: "calc(100vw - 90px)", height: 'calc(100vw - 90px)', backgroundColor: "#ADADAD" }} />
                            <View style={{ display: 'flex', padding: '15px 12px', backgroundColor: 'white' }}>
                                <View style={{ display: 'flex', flexDirection: 'column', flexGrow: 1, marginRight: '10px' }}>
                                    <Text style={{ color: '#000000', fontSize: '18px' }} className='oneLine line2'>{viewModel.name}</Text>
                                    <Text style={{ color: '#000000', fontSize: '14px' }} className='oneLine line2'>{viewModel.corName}</Text>
                                </View>

                                <Image src={viewModel.qrcode || ''} style={{ width: '76px', height: '76px', backgroundColor: '#ADADAD', flexShrink: 0 }} mode='aspectFit' />
                            </View>
                        </View>


                        <Text style={{ color: '#B3B3B3', fontSize: '12px', textAlign: 'center', margin: '20px 0' }}>扫描二维码，添加我的企业微信</Text>
                    </View>
                </View>


            </View>
        </View>

    )
})



const styles: Record<string, React.CSSProperties> = {
    container: {
        position: 'fixed',
        zIndex: 99999,
        width: '100%',
        height: '100vh',
        backgroundColor: '#00000055',
        visibility: 'hidden',
        // visibility: 'visible',
        overflow: 'hidden',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
    },
    contentViewStyle: {
        transform: 'scale(0.5)',
        position: 'absolute',
        display: 'flex',
    }
}



